<template>
	<view class="ok-code_wrap">
		<view class="from_wrap">
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/zhanghu.svg"></image> -->
					<text>OK账号</text>
				</view>
				<input type="text" v-model="account" placeholder="请输入OK账号" />
			</view>
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/yaoshi.svg"></image> -->
					<text>apiKey</text>
				</view>
				<input type="text" v-model="apiKey" placeholder="请输入apiKey" />
			</view>
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
					<text>secretKey</text>
				</view>
				<input type="text" v-model="secretKey" placeholder="请输入secretKey" />
			</view>
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
					<text>Passphrase</text>
				</view>
				<input type="text" v-model="passphrase" placeholder="请输入Passphrase" />
			</view>
		</view>
		
		<button type="warn" class="form_btn" @click="bindOkAccount">绑定</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				apiKey: '',
				secretKey:'',
				passphrase: ''
			}
		},
		methods: {
			// 绑定ok账户
			bindOkAccount() {
				if (this.account == '') {
					uni.showToast({
						title:'请输入OK账号',
						icon:'none'
					});
					return;
				};
				if (this.apiKey == '') {
					uni.showToast({
						title:'请输入apiKey',
						icon:'none'
					});
					return;
				}
				if (this.secretKey == '') {
					uni.showToast({
						title:'请输入secretKey',
						icon:'none'
					});
					return;
				}
				if (this.passphrase == '') {
					uni.showToast({
						title:'请输入passphrase',
						icon:'none'
					});
					return;
				}
				uni.showLoading();

				this.$api.bindOkAccount({
					account: this.account,
					key: this.apiKey,
					secret: this.secretKey,
					passphrase: this.passphrase
				}, res => {
					uni.hideLoading();
					if (res.data.type == 'ok') {
						uni.switchTab({
							url: '/pages/mine/index'
						})
					}else{
						uni.showToast({
							title:'输入有误，请重新确认',
							icon:'none'
						});
					}
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
.ok-code_wrap{
	.from_wrap{
		margin:20upx;
		padding:20upx;
		border-radius: 10upx;
		background-color:#FFFFFF;
		overflow: hidden;
		.form_item{
			position:relative;
			.item_title{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height:50upx;
				// image{
				// 	width:45upx;
				// 	height:40upx;
				// 	margin:0 20upx 0 40upx;
				// }
			}
			input{
				position:relative;
				display: block;
				height:80upx;
				line-height:80upx;
			}
			input:after{
				content:"";
				position:absolute;
				bottom:0;
				left:0;
				right:0;
				border-top:1px solid rgba(0,0,0,0.1);
				-webkit-transform:scaleY(.5);
				-webkit-transform-origin:0 0;
			}
			.verify_btn{
				position:absolute;
				top:60upx;
				right:40upx;
				z-index:999;
				border-radius: 50upx;
				background-color: #E03E4D;
			}
		}
	}
	
	.form_btn{
		position: fixed;
		bottom:100upx;
		right:5%;
		width:90%;
		border-radius: 50upx;
		background-color: #E03E4D;
	}
}
</style>
